<!--
 * @Date: 2023-02-27 20:46:51
 * @LastEditors: 于波
 * @LastEditTime: 2023-02-27 22:14:00
 * @Description: 
-->
<template>
    <Header />
    <main>
        <h1>
            {{
                key || types.find(r => r.id == Number($route.query.type))?.name
            }}
        </h1>
        <div v-if="articleList.length == 0">暂无结果！</div>
        <div class="article-list">
            <div class="article" v-for="item in articleList" :key="item.id">
                <h3>
                    <router-link target="_blank" :to="`/article/${item.id}`">
                        {{ item.title }}
                    </router-link>
                </h3>
                <p>
                    {{ item.describe }}
                </p>

                <div class="bottom">
                    <span style="margin-left: auto">
                        发布时间：{{ item.createTime }}
                    </span>
                    <span>作者：{{ item.username }}</span>
                    <span v-if="item.type">分类：{{ item.type }}</span>
                </div>
                <el-divider />
            </div>
        </div>
    </main>
</template>
<script setup lang="ts">
import Header from '@/components/Header.vue';
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import request from '@/api';
import { Article, Banner, Type } from '@/types';
import { useRoute } from 'vue-router';

const route = useRoute();

// 文章列表
const articleList = ref<Array<Article>>([]);
// 类型
const types = ref<Array<Type>>([]);

// 类型列表请求
request.get('/GetArticleType').then(res => {
    types.value = res.data;
});
const { type, key } = route.query;

// 文章列表请求
request
    .get('/GetArticleList', {
        params: {
            typeId: type,
            key: key,
        },
    })
    .then(res => {
        articleList.value = res.data;
    });
</script>
<style scoped lang="less">
main {
    width: 70%;
    margin: 0 auto;
    padding: 50px;
    --el-color-primary: #00c8c8;
    .search {
        margin: 100px 0;
        .input {
            display: flex;
            justify-content: center;
        }
        .type {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: row wrap;
            span {
                color: #000;
                margin-bottom: 10px;
                margin-right: 20px;
            }
            a {
                margin-right: 20px;
                color: #00c8c8;
                margin-bottom: 10px;
            }
        }
    }
    h1 {
        display: inline-block;
        margin-bottom: 100px;
        border-bottom: 5px solid #00c8c8;
    }
    .article-list {
        .article {
            background-color: #eee;
            h3 {
                display: inline-block;
                a {
                    color: #000;
                }
                margin-bottom: 0;
                margin-top: 0;
                font-size: 24px;
                &:hover {
                    text-decoration: underline;
                    cursor: pointer;
                }
            }
            p {
                text-indent: 2em;
            }
            .bottom {
                display: flex;
                margin-top: 10px;
                span {
                    margin-right: 20px;
                }
            }
        }
    }
}
</style>
